<!DOCTYPE html>
<html lang="en-US">
  <head>
    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
    <script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone@7.8.7/babel.min.js"></script>
    <script crossorigin="anonymous" src="https://unpkg.com/react@16.8.6/umd/react.development.js"></script>
    <script crossorigin="anonymous" src="https://unpkg.com/react-dom@16.8.6/umd/react-dom.development.js"></script>
    <script crossorigin="anonymous" src="/test-harness.js"></script>
    <script crossorigin="anonymous" src="/test-page-object.js"></script>
    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
    <style type="text/css">
      body {
        background-color: #f7f7f7;
      }

      #webchat {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
        margin: 0 auto;
        max-width: 480px;
        min-width: 360px;
      }

      :focus {
        background-color: gold !important;
      }
    </style>
  </head>
  <body>
    <main id="webchat"></main>
    <script type="text/babel" data-presets="env,stage-3,react">
      const {
        React: { useEffect },
        ReactDOM: { render },
        WebChat: {
          Components: { BasicWebChat, Composer },
          createDirectLine,
          hooks: { useConnectivityStatus, useSendMessage }
        }
      } = window;

      run(async function () {
        const directLine = await createDirectLine({ token: await testHelpers.token.fetchDirectLineToken() });
        const store = testHelpers.createStore();
        const styleOptions = { subtle: 'Black' };

        const SendOnConnect = () => {
          const [connectivityStatus] = useConnectivityStatus();
          const sendMessage = useSendMessage();

          const connected = connectivityStatus === 'connected';

          useEffect(() => {
            connected && sendMessage('suggested-actions');
          }, [connected]);

          return false;
        };

        function renderWebChat(props) {
          return new Promise(resolve => {
            render(
              <Composer directLine={directLine} store={store} styleOptions={styleOptions} {...props}>
                <BasicWebChat />
                <SendOnConnect />
              </Composer>,
              document.getElementById('webchat'),
              resolve
            );
          });
        }

        await renderWebChat({ suggestedActionsAccessKey: false });

        await pageConditions.uiConnected();
        await pageConditions.minNumActivitiesShown(2);
        await pageConditions.allImagesLoaded();
        await pageConditions.suggestedActionsShown();
        await pageConditions.liveRegionStabilized();

        const screenReaderTexts = [].map.call(pageElements.liveRegion().children, child =>
          testHelpers.getAllTextContents(child).join('\n')
        );

        expect(screenReaderTexts).toEqual([
          'connecting',
          'You said:\nsuggested-actions',
          'Bot said:\nPlease select one of the actions below\nIM back as string\nPost back as string\nPost back as JSON\nMessage back as JSON with display text\nMessage back as JSON without display text\nMessage back as string with display text',
          'Message has suggested actions. Press shift tab 2 to 3 times to select them.'
        ]);

        expect(document.querySelector('.webchat__suggested-actions').getAttribute('aria-label')).toBe(
          'Suggested actions'
        );

        expect(document.querySelectorAll('[aria-keyshortcuts]')).toHaveProperty('length', 0);

        // Change access key on-the-fly.

        await renderWebChat({ suggestedActionsAccessKey: 'Z z' });

        // Access key only works when the focus is inside Web Chat.
        // It will not work when the user is focusing on web page content, to prevent conflict with the hosting page.
        await pageObjects.focusTranscript();

        await host.snapshot();

        await host.sendAccessKey('Z');

        await host.snapshot();
      });
    </script>
  </body>
</html>
